<template>
  <div>
    <fks-dialog
      :visible="visible"
      :append-to-body="true"
      width="960px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close"
    >
      <template slot="title">
        <i class="fks-icon-setting-solid" />
        <span>{{ title }}</span>
      </template>
      <div>
        <div>
          <span
            v-if="!form.state"
            class="warn-title"
          >{{ LANG.ENABLE }}</span>
          <span
            v-if="form.state"
            class="warn-title"
          >{{ LANG.CLOSE }}</span>
          <fks-switch v-model="form.state" />
        </div>
        <div v-if="form.state">
          <div class="warn-item">
            <div class="warn-label">
              {{ LANG.ALERT_CONDITION }}
            </div>
            <span>{{
              warningType == 'cpu'
                ? LANG.CPU
                : warningType == 'mem'
                  ? LANG.MEM
                  : LANG.DISK_ALL
            }}</span><span>{{ LANG.UTILIZATIONRATE_EXCEEDS }}</span>
            <fks-input
              v-model="form.usedRate"
              class="input-rate"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              size="medium"
              :placeholder="LANG.PERCENTAGE"
            />
            <span>%</span>
            <div
              v-if="warningType != 'disk'"
              style="display: inline-block"
            >
              <span class="space">,</span>
              <span>{{ LANG.LAST_TIME }}</span>
              <fks-input-number
                v-model="form.lastTime"
                class="space"
                controls-position="right"
                :step="warningType == 'cpu' ? 1 : 5"
                :min="warningType == 'cpu' ? 1 : 5"
                :precision="0"
              />
              <span>{{ LANG.MINUTE }}</span>
            </div>
          </div>
          <div class="warn-item">
            <div class="warn-label">
              {{ LANG.NOTIFY_METHOD }}
            </div>
            <fks-checkbox-group
              v-model="form.informMethod"
              style="display: inline-block"
              :max="2"
            >
              <fks-checkbox label="email">
                {{ LANG.NOTIFY_METHOD_EMAIL }}
              </fks-checkbox>
              <fks-checkbox label="phone">
                {{ LANG.NOTIFY_METHOD_SMS }}
              </fks-checkbox>
            </fks-checkbox-group>
          </div>
          <div class="warn-item">
            <div class="warn-label">
              {{ LANG.NOTIFY }}
            </div>
            <fks-user-selector
              :username.sync="form.userName"
              :userfullname.sync="form.userFullName"
              :recent-user="false"
              multiple
              url
              width="auto"
              :placeholder="LANG.PLEASE_SELECT"
            />
          </div>
        </div>
        <div v-if="warningType == 'disk'">
          <div style="margin: 24px 0">
            {{ LANG.DISK_PART_UTILIZATIONRATE_MONITOR }}
          </div>
          <hr style="color: #eff0f5; opacity: 0.2">
          <div>
            <div
              v-for="(item, index) in subDiskList"
              :key="index"
            >
              <div style="display: flex; align-items: center">
                <span class="warn-title">{{ LANG.DISK_PART }}</span>
                <fks-switch v-model="item.state" />
                <div style="flex: 1; text-align: right">
                  <fks-button
                    style="cursor: pointer"
                    size="medium"
                    @click="delDisk(index)"
                  >
                    <i
                      class="fks-icon-delete iconClass"
                      style="color: #2f53ea"
                    />
                  </fks-button>
                </div>
              </div>
              <div v-if="item.state">
                <div class="warn-item">
                  <div class="warn-label">
                    {{ LANG.ALERT_CONDITION }}
                  </div>
                  <span>{{ LANG.WHEN }}</span>
                  <fks-select
                    v-model="item.diskName"
                    style="display: inline-block; width: 96px; margin: 0 12px"
                    clearable
                    :placeholder="LANG.PLEASE_SELECT"
                  >
                    <fks-option
                      v-for="(item, index) in diskPartList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </fks-select>
                  <span>{{ LANG.UTILIZATIONRATE_EXCEEDS }}</span>
                  <fks-input
                    v-model="item.usedRate"
                    class="input-rate"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    size="medium"
                    :placeholder="LANG.PERCENTAGE"
                  />
                  <span>%</span>
                </div>
                <div class="warn-item">
                  <div class="warn-label">
                    {{ LANG.NOTIFY_METHOD }}
                  </div>
                  <fks-checkbox-group
                    v-model="item.informMethod"
                    style="display: inline-block"
                    :max="2"
                  >
                    <fks-checkbox label="email">
                      {{ LANG.NOTIFY_METHOD_EMAIL }}
                    </fks-checkbox>
                    <fks-checkbox label="phone">
                      {{ LANG.NOTIFY_METHOD_SMS }}
                    </fks-checkbox>
                  </fks-checkbox-group>
                </div>
                <div class="warn-item">
                  <div class="warn-label">
                    {{ LANG.NOTIFY }}
                  </div>
                  <fks-user-selector
                    :username.sync="item.userName"
                    :userfullname.sync="item.userFullName"
                    :recent-user="false"
                    multiple
                    url
                    width="auto"
                    :placeholder="LANG.PLEASE_SELECT"
                  />
                </div>
              </div>
              <hr style="color: #eff0f5; opacity: 0.2">
            </div>
          </div>
          <div
            style="cursor: pointer"
            @click="diskIncrease"
          >
            <i
              class="fks-icon-circle-plus-outline"
              style="margin-right: 5px; color: #2f53ea"
            />
            <span>{{ LANG.ADD_DISK_PART }}</span>
          </div>
        </div>
      </div>
      <template slot="footer">
        <section>
          <fks-button
            type="primary"
            icon="fks-icon-check"
            @click="submit"
          >
            {{ LANG.SAVE }}
          </fks-button>
        </section>
      </template>
    </fks-dialog>
  </div>
</template>
<script>
import {
  cpuAlert,
  memAlert,
  diskAlert,
  getDiskPartData,
  getCPUAlert,
  getDiskAlert,
  getMEMAlert
} from '../api'
export default {
  props: {
    visible: {
      type: Boolean,
      defalult: false
    },
    warningType: {
      type: String,
      defalult: ''
    }
  },
  data() {
    return {
      form: {
        state: false,
        usedRate: '',
        lastTime: '',
        informMethod: [],
        userName: '',
        userFullName: ''
      },
      diskPartList: [],
      subDiskList: [],
      diskAlertData: {
        sysMonitorDiskAlertExts: []
      },
      title: '',
      subDiskCheckFlag: true
    }
  },
  created() {
    switch (this.warningType) {
      case 'cpu':
        this.getCPUAlert()
        this.title = this.LANG.CPU_UTILIZATIONRATE
        break
      case 'mem':
        this.getMEMAlert()
        this.title = this.LANG.MEM_UTILIZATIONRATE
        break
      case 'disk':
        this.getDiskAlert()
        this.getAllPartDisk()
        this.title = this.LANG.DISK_UTILIZATIONRATE
        break
    }
  },
  methods: {
    //获取磁盘分盘列表
    getAllPartDisk() {
      getDiskPartData()
        .then((res) => {
          if (res.status) {
            res.data.forEach((item) => {
              this.diskPartList.push({
                label: item.diskDirName + this.LANG.DISC,
                value: item.diskDirName
              })
            })
          }
        })
        .catch(() => {
          this.diskPartList = []
        })
    },
    //关闭告警弹框
    close() {
      this.$emit('update:visible', false)
      this.form = {
        state: false,
        usedRate: '',
        lastTime: '',
        informMethod: [],
        userName: '',
        userFullName: ''
      }
      this.subDiskList = []
    },
    //添加分区磁盘告警
    diskIncrease() {
      if (this.subDiskList.length < this.diskPartList.length) {
        let disk = {
          state: true,
          diskName: '',
          usedRate: '',
          informMethod: [],
          userName: '',
          userFullName: ''
        }
        this.subDiskList.push(disk)
      } else {
        this.$message.warning(this.LANG.MONITOR_TIP)
      }
    },
    //删除分区磁盘告警
    delDisk(index) {
      this.subDiskList.splice(index, 1)
    },
    //校验告警条件
    checkData(form) {
      if (form.state) {
        if (form.usedRate < 0 || form.usedRate > 100) {
          this.$message.error(this.LANG.PARAMS_OVERFLOW)
          return false
        }
        if (
          form.usedRate == '' ||
          form.informMethod.length == 0 ||
          form.userName == ''
        ) {
          this.$message.error(this.LANG.PARAMS_EMPTY)
          return false
        }
        if (this.warningType != 'disk' && !form.lastTime) {
          this.$message.error(this.LANG.PARAMS_EMPTY)
          return false
        }
        if (this.warningType == 'disk' && form.diskName == '') {
          this.$message.error(this.LANG.PARAMS_EMPTY)
          return false
        }
      }
      return true
    },
    //提交告警数据
    submit() {
      switch (this.warningType) {
        case 'cpu':
          this.cpuAlert()
          break
        case 'mem':
          this.memAlert()
          break
        case 'disk':
          this.diskAlert()
          break
      }
    },
    //cpu告警
    cpuAlert() {
      if (this.checkData(this.form)) {
        let cpuForm = {
          state: this.form.state ? 0 : -1,
          usedRate: parseFloat(this.form.usedRate / 100).toFixed(4),
          lastTime: this.form.lastTime ? this.form.lastTime : 5,
          informMethod: this.form.informMethod,
          userNames: this.form.userName ? this.form.userName.split(',') : []
        }
        cpuAlert(cpuForm)
          .then((res) => {
            if (res.status) {
              this.$message.success(this.LANG.SUMBIT_SUCCESS)
              this.close()
            }
          })
          .catch(() => {})
      }
    },
    //内存告警
    memAlert() {
      if (this.checkData(this.form)) {
        let memForm = {
          state: this.form.state ? 0 : -1,
          usedRate: parseFloat(this.form.usedRate / 100).toFixed(4),
          lastTime: this.form.lastTime,
          informMethod: this.form.informMethod,
          userNames: this.form.userName ? this.form.userName.split(',') : []
        }
        memAlert(memForm)
          .then((res) => {
            if (res.status) {
              this.$message.success(this.LANG.SUMBIT_SUCCESS)
              this.close()
            }
          })
          .catch(() => {})
      }
    },
    //磁盘告警
    diskAlert() {
      if (this.checkData(this.form)) {
        for (let i = 0; i < this.subDiskList.length; i++) {
          for (let j = i + 1; j < this.subDiskList.length; j++) {
            if (this.subDiskList[i].diskName == this.subDiskList[j].diskName) {
              return this.$message.warning(this.LANG.DUPLICATE_DISK_SELECTED)
            }
          }
        }
        let diskForm = {
          diskName: 'totalDisk',
          state: this.form.state ? 0 : -1,
          diskUsedRate: parseFloat(this.form.usedRate / 100).toFixed(4),
          informMethod: this.form.informMethod,
          userNames: this.form.userName ? this.form.userName.split(',') : []
        }
        this.diskAlertData.sysMonitorDiskAlertExts.push(diskForm)
        for (let i = 0; i < this.subDiskList.length; i++) {
          if (this.checkData(this.subDiskList[i])) {
            let temp_disk = {
              diskName: this.subDiskList[i].diskName,
              state: this.subDiskList[i].state ? 0 : -1,
              diskUsedRate: parseFloat(
                this.subDiskList[i].usedRate / 100
              ).toFixed(4),
              informMethod: this.subDiskList[i].informMethod,
              userNames: this.subDiskList[i].userName
                ? this.subDiskList[i].userName.split(',')
                : []
            }
            this.subDiskCheckFlag = true
            this.diskAlertData.sysMonitorDiskAlertExts.push(temp_disk)
          } else {
            this.subDiskCheckFlag = false
            break
          }
        }
        if (this.subDiskCheckFlag) {
          diskAlert(this.diskAlertData)
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.SUMBIT_SUCCESS)
                this.close()
              }
            })
            .catch(() => {})
        }
      }
    },
    //获取cpu告警信息
    getCPUAlert() {
      getCPUAlert()
        .then((res) => {
          if (res.data) {
            this.form.state = res.data.state == 0 ? true : false
            this.form.usedRate = res.data.usedRate * 100
            this.form.lastTime = res.data.lastTime
            this.form.informMethod = res.data.informMethod
            let temp_userName = res.data.userList.map((item) => {
              return item.userName
            })
            let temp_userFullName = res.data.userList.map((item) => {
              return item.userFullname
            })
            this.form.userName = temp_userName.join(',')
            this.form.userFullName = temp_userFullName.join(',')
          }
        })
        .catch(() => {})
    },
    //获取内存告警信息
    getMEMAlert() {
      getMEMAlert()
        .then((res) => {
          if (res.data) {
            this.form.state = res.data.state == 0 ? true : false
            this.form.usedRate = res.data.usedRate * 100
            this.form.lastTime = res.data.lastTime
            this.form.informMethod = res.data.informMethod
            let temp_userName = res.data.userList.map((item) => {
              return item.userName
            })
            let temp_userFullName = res.data.userList.map((item) => {
              return item.userFullname
            })
            this.form.userName = temp_userName.join(',')
            this.form.userFullName = temp_userFullName.join(',')
          }
        })
        .catch(() => {})
    },
    //获取磁盘告警信息
    getDiskAlert() {
      getDiskAlert()
        .then((res) => {
          if (res.data) {
            let diskInfo = res.data
            if (diskInfo[0].diskName == 'totalDisk') {
              this.form.state = diskInfo[0].state == 0 ? true : false
              this.form.usedRate = diskInfo[0].diskUsedRate * 100
              this.form.informMethod = diskInfo[0].informMethod
              let temp_userName = diskInfo[0].userList.map((item) => {
                return item.userName
              })
              let temp_userFullName = diskInfo[0].userList.map((item) => {
                return item.userFullname
              })
              this.form.userName = temp_userName.join(',')
              this.form.userFullName = temp_userFullName.join(',')
              diskInfo.shift()
              diskInfo.forEach((item) => {
                let sub_userName = item.userList.map((val) => {
                  return val.userName
                })
                let sub_userFullName = item.userList.map((val) => {
                  return val.userFullname
                })
                let sub_disk = {
                  state: item.state == 0 ? true : false,
                  usedRate: item.diskUsedRate * 100,
                  diskName: item.diskName,
                  informMethod: item.informMethod,
                  userName: sub_userName.join(','),
                  userFullName: sub_userFullName.join(',')
                }
                this.subDiskList.push(sub_disk)
              })
            } else {
              diskInfo.forEach((item) => {
                let sub_userName = item.userList.map((val) => {
                  return val.userName
                })
                let sub_userFullName = item.userList.map((val) => {
                  return val.userFullname
                })
                let sub_disk = {
                  state: item.state == 0 ? true : false,
                  usedRate: item.diskUsedRate * 100,
                  diskName: item.diskName,
                  informMethod: item.informMethod,
                  userName: sub_userName.join(','),
                  userFullName: sub_userFullName.join(',')
                }
                this.subDiskList.push(sub_disk)
              })
            }
          }
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .fks-dialog {
  .svgClass {
    margin-right: 16px;
    color: #2f53ea;
  }

  .warn-title {
    height: 20px;
    margin-right: 16px;
    font-size: 16px;
    font-family: MicrosoftYaHei, sans-serif;
    line-height: 20px;
    color: #000;
  }

  .warn-item {
    margin: 16px 0;

    .warn-label {
      display: inline-block;
      min-width: 80px;
      margin-right: 64px;
    }
  }

  .input-rate {
    display: inline-block;
    width: 72px;
    margin: 0 12px;
    text-align: center;
  }

  .space {
    margin: 0 12px;
  }

  .fks-user-selector-page {
    .fks-input__inner {
      width: 480px;
    }
  }
}
</style>